<template>
  <div>
    <el-table border :data="userTasks" style="width: 100%; margin-top: 20px">
      <el-table-column label="节点编码" prop="nodeCode" width="180" />
      <el-table-column label="节点名称" prop="nodeName" />
      <el-table-column label="审批任务">
        <template #default="scope">
          <div v-for="(item, index) in scope.row.userTasks" :key="index" style="margin-top: 10px">
            <!--            <el-checkbox v-if="scope.row.isAssign == 1" />-->
            {{ item.userName }}
            <span :class="'usertask-option-' + item.userOption" style="float: right; width: 60px; text-align: center">
              {{ item.userOptionStr }}
            </span>
            <span style="float: right">{{ item.dealtime }}</span>
            <el-divider border-style="dashed" />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="workflow-top">
      <el-row>
        <el-col :offset="1" :span="24" style="font-size: 24px; text-align: center"> {{ info.name }} {{ info.code }} </el-col>
      </el-row>
    </div>
    <div v-loading="workflowLoading" class="workflow-container">
      <div id="container" ref="container"></div>

      <!-- 属性面板 -->
      <el-drawer v-model="dialogVisible" :before-close="closeDialog" direction="rtl" size="400px" title="设置节点属性">
        <PropertyDialog
          v-if="dialogVisible"
          :is-detail="true"
          :lf="lf"
          :node-data="clickNode"
          @set-properties-finish="closeDialog"
        />
      </el-drawer>
    </div>
  </div>
</template>

<script setup>
import LogicFlow from "@logicflow/core";
import Snapshot from "@logicflow/extension/lib/Snapshot";
import PropertyDialog from "./components/propertySetting/PropertyDialog.vue";
import { useRoute, useRouter } from "vue-router";
import { registerEnd, registerPolyline, registerStart, registerCondition, registerUser } from "./components/registerNode";
import { postRequest } from "@/api/mains";
import { drawerConfig, theme } from "./config";
import { failMsg } from "@/utils/MessageUtils";

const props = defineProps({
  bid: {
    type: String,
    default: ""
  },
  btype: {
    type: String,
    default: ""
  }
});

const lf = ref(null);
//const url = 'system/procesDefinition'
const dialogUrl = "processCommon/bussProcess";
const route = ref(useRoute());
const router = useRouter();
const dialogVisible = ref(false);
const workflowLoading = ref(false);
const routeQuery = ref(route.value.query);

const clickNode = ref(null);
const info = ref({
  code: "",
  name: ""
});

const userTasks = ref([]);

const data = ref([]);
watch(
  () => router.currentRoute.value.fullPath,
  newVal => {
    if (newVal.indexOf("workflowInfo") < 0) return;
    route.value = useRoute();
    routeQuery.value = route.value.query;
    initData();
  },
  { immediate: true }
);

async function getDetailsInfo() {
  const { bid, btype } = props;
  if (bid) {
    workflowLoading.value = true;
    const res = await postRequest(dialogUrl, { bid: bid, btype: btype });
    workflowLoading.value = false;
    if (res.data && res.data.processDefinition && res.data.processDefinition.content) {
      info.value = res.data.processDefinition;
      info.value.code = `【${info.value.code}】`;
      data.value = JSON.parse(res.data.processDefinition.content);
      userTasks.value = res.data.nodes;
      render();
    }
  } else {
    /* const res = await getDetails(url, props.bid)
      if (res.data && res.data.content) {
        info.value = res.data
        info.value.code = `【${info.value.code}】`
        data.value = JSON.parse(res.data.content)
        render()
      } */
  }
}
function initData() {
  getDetailsInfo();
}

const parentGetNodes = () => {
  return userTasks;
};

defineExpose({
  parentGetNodes
});
const event = () => {
  lf.value.on("node:click", ({ data }) => {
    console.log("node:click", data);

    clickNode.value = data;
    dialogVisible.value = true;
  });
  lf.value.on("edge:click", ({ data }) => {
    console.log("edge:click", data);

    clickNode.value = data;
    dialogVisible.value = true;
  });
  lf.value.on("element:click", () => {
    //this.hideAddPanel()
  });
  lf.value.on("blank:click", () => {
    //this.hideAddPanel()
  });
  lf.value.on("connection:not-allowed", data => {
    failMsg(data.msg);
  });
  lf.value.on("node:mousemove", () => {
    console.log("on mousemove");
  });
};
function render() {
  lf.value.render(data.value);
  event();
}
// 自定义
const registerNode = () => {
  registerStart(lf.value);
  registerEnd(lf.value);
  registerPolyline(lf.value);
  registerCondition(lf.value);
  registerUser(lf.value);
  render();
};
const initLF = () => {
  if (!document.querySelector("#container")) return;
  LogicFlow.use(Snapshot);

  // 渲染画布
  lf.value = new LogicFlow({
    ...drawerConfig,
    isSilentMode: true,
    stopScrollGraph: true,
    container: document.querySelector("#container")
  });
  // 设置主题
  lf.value.setTheme(theme);
  registerNode();
};

const closeDialog = () => {
  dialogVisible.value = false;
};

onMounted(() => {
  initLF();
  initData();
});

watch(
  () => props.bid,
  newVal => {
    if (newVal) {
      //initLF()
      initData();
    }
  }
);
</script>

<style lang="scss" scoped>
.workflow-top {
  position: relative;
  padding: 10px;
  .title {
    height: 32px;
    padding: 0 15px;
    font-size: 18px;
    line-height: 18px;
    text-align: center;
  }
  .btn {
    position: absolute;
    top: 10px;
    right: 25px;
  }
}
.workflow-container {
  position: relative;
  .vab-control {
    position: absolute;
    top: $base-margin * 2;
    left: $base-margin * 2;
    z-index: 2;
  }
  #container {
    height: calc(#{$base-keep-alive-height} - #{$base-padding} * 2);
    outline: none;
  }
  .time-plus {
    cursor: pointer;
  }
  .add-panel {
    position: absolute;
    z-index: 11;
  }
}
.usertask-option-10 {
  color: #2cc642;
}
</style>
